@import "./assets/styles/variables.scss";
@import "../../assets/styles/markdown.scss";

.module-status-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px 100px;
  margin: 0;
  width: 100%;
}

.module-status-table-wrapper {
  margin: 0;
  width: 100%;
}

.status-table {
  width: 100%;
  margin-top: 16px;
  min-width: 800px;
  position: relative;
}

.dependencies-header,
.ci-header,
.license-header,
.node-header {
  width: 10.546875%;
  text-align: center;
  font-weight: 900;
}

.version-header {
  width: 18.75%;
  text-align: center !important;
  font-weight: 900;
}

.header-module {
  text-align: center;
}

.header-row {
  position: relative;
  z-index: 1;
}

.module-name {
  width: 25%;
  border-right: 1px solid $dark-white;
  text-align: center;
  vertical-align: middle;
  font-size: 1.15em;
  font-weight: 700;
}

.module-row {
  border-bottom: 3px solid $dark-white;
  background-color: $white;
}

.module-name {
  position: relative;
}

.module-name-link {
  display: block;
  position: absolute;
  content: "";
  visibility: hidden;
  top: -150px;
  z-index: -5;
}

.module-row:nth-child(odd) {
  background-color: $off-white;
}

.nested-table {
  width: 100%;
}

.nested-table td {
  width: 14.0625%;
  text-align: center;
}

.module-license {
  width: 18.75%;
}

.module-version {
  width: 25% !important;
}

.status-table th {
  padding: 10px;
  font-size: 1.15em;
  position: sticky;
  top: 90px;
  background-color: $white;
  z-index: 1;
}

.status-table th:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  border-bottom: 1px solid $dark-white;
  z-index: 1;
}

.status-table td {
  padding: 10px;
}

.status-table tbody {
  border: 3px solid $dark-white;
}

.nested-tbody {
  border: none !important;
}

.nested-tbody td {
  vertical-align: middle;
}

.nested-td {
  box-sizing: border-box;
  padding: 0 !important;
}

.nested-tbody tr:not(:last-child) {
  border-bottom: 1px solid $dark-white;
}

.module-version-wrapper,
.module-version-wrapper a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.version-name {
  color: $orange;
  font-weight: 700;
}

.module-version-wrapper * {
  margin: 0;
}

.version-helmet {
  padding: 0 20px;
}

.version-img {
  width: 20px;
  min-width: 20px;
}

.status-link {
  font-weight: 700;
}

.status-passing {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1dd022;
}

.status-nonMaster {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10872a;
}

.status-failing {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e80013;
}

.status-unknown {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #797979;
}

.hide {
  display: hidden;
}

@media screen and (max-width: 1500px) {
  .module-status-wrapper {
    padding: 20px 40px;
  }

  .status-table th {
    font-size: 14px;
    padding: 10px 0px;
  }

  .module-name {
    font-size: 16px;
  }

  .status-table td {
    padding: 10px 5px;
  }
}

@media screen and (max-width: 900px) {
  .module-status-wrapper {
    padding: 10px 10px 0 10px;
    overflow-x: auto;
  }

  .status-table {
    margin-right: 10px;
  }

  .status-table th {
    padding: 0;
    font-size: 12px;
  }
}


@media (prefers-color-scheme: dark) {

  .module-row {
    background-color: $black;
  }
  .module-row:nth-child(odd) {
    background-color: $blacker;
  }
  .status-table th {
    background-color: $black;
  }

  .module-name,
  .module-row,
  .status-table th:after,
  .status-table tbody,
  .nested-tbody tr:not(:last-child)  {
    border-color: $blackest !important;
  }

  table thead tr th {
    color: $gray !important;
  }
}
